/* @import './base.css';

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;

  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 确保页面有统一的背景色 */
html, body {
  background-color: #f4f4f4 !important;
  min-height: 100vh;
}

/* 确保在黑暗模式下页面底部没有白边 */
html.dark {
  background-color: #111827 !important; /* bg-gray-900 */
  min-height: 100vh;
  color-scheme: dark;
}

html.dark body {
  background-color: #111827 !important; /* bg-gray-900 */
  color: #f3f4f6 !important; /* text-gray-100 */
  min-height: 100vh;
}

/* 设置全局底部边缘 */
html.dark::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px; /* 确保覆盖底部可能的白边 */
  background-color: #111827 !important;
  z-index: 10;
}

/* 白天模式下的卡片和容器背景 */
.bg-white {
  background-color: white !important;
}

/* 修复评论区域在黑暗模式下的文本颜色 */
.dark .text-gray-700 {
  color: #d1d5db !important; /* text-gray-300 */
}

/* 确保黑暗模式下的文章标题可见 */
.dark .title {
  color: #ffffff !important;
}

/* 确保黑暗模式下的文章内容标题可见 */
.dark .article-content h1,
.dark .article-content h2,
.dark .article-content h3,
.dark .article-content h4,
.dark .article-content h5,
.dark .article-content h6 {
  color: #e5e7eb !important;
}

/* 让评论输入框在暗模式下颜色更亮一些 */
.dark textarea, 
.dark .comment-form textarea {
  background-color: #374151 !important; /* bg-gray-700 */
  border-color: #4b5563 !important; /* border-gray-600 */
  color: #f3f4f6 !important; /* text-gray-100 */
}

/* 修复文章底部白边 */
.dark footer, 
.dark .footer,
.dark body::after {
  background-color: #111827 !important; /* bg-gray-900 */
  border-color: #374151 !important; /* border-gray-700 */
  border: none !important;
  box-shadow: none !important;
}

/* 确保分页器在黑暗模式下颜色正确 */
.dark .bg-white {
  background-color: #1f2937 !important;
}

.dark .border-gray-300 {
  border-color: #374151 !important;
}

.dark .text-gray-500 {
  color: #9ca3af !important;
}

/* 修复文章详情页和评论区域在暗模式下的边缘问题 */
.dark .comment-section,
.dark .article-content,
.dark .article-footer {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

/* 确保所有容器和卡片在黑暗模式下的背景色一致 */
.dark .bg-white,
.dark .bg-gray-50 {
  background-color: #1f2937 !important;
}

/* 修复黑暗模式下文章内容中可能出现的白色背景 */
.dark .article-content * {
  background-color: transparent !important;
  color: inherit !important;
}

/* 修复白边 */
html.dark ::after,
html.dark ::before {
  background-color: transparent;
  border-color: #374151 !important;
}

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 1px transparent inset!important;
}